<template>
  <div class="threeChart"></div>
</template>

<script>
// import echarts from 'echarts'
export default {
  name: 'threeChart',
  data () {
    return {
      monthList: [],
      accessNumberList: [],
      sendNumberList: []
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    async getData () {
      // 获取后台数据
      const res = await this.$http.get('/api/platApi/wuLiu/siteLogisticsData/selectYearByMonthNumber', { params: { year: '2020' } })
      if (res.status === 200 && res.data.code === 1) {
        this.dataList = res.data.data
        res.data.data.forEach((el, i) => {
          if (el.accessNumber !== 0 || el.sendNumber !== 0) {
            this.monthList.push(el.month + '月')
            this.accessNumberList.push(el.accessNumber)
            this.sendNumberList.push(el.sendNumber)
          }
        })
      }
      // console.log(data)
      var myChart = this.$echarts.init(document.querySelector('.threeChart'))
      var option = {
        color: ['#2f89cf', '#f60'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['2011年', '2012年']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          axisLabel: {
            textStyle: {
              color: 'rgba(255,255,255,.6)',
              fontSize: '12'
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.1)'
              // width: 1,
              // type: "solid"
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.1)'
            }
          }
        },
        yAxis: {
          type: 'category',
          data: this.monthList,
          axisLabel: {
            textStyle: {
              color: 'rgba(255,255,255,.6)',
              fontSize: '12'
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.1)'
              // width: 1,
              // type: "solid"
            }
          }
        },
        series: [
          {
            name: '发出数量',
            type: 'bar',
            data: this.sendNumberList
          },
          {
            name: '收入数量',
            type: 'bar',
            data: this.accessNumberList
          }
        ]
      }

      myChart.setOption(option)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    }
  }

}
</script>

<style scoped lang="less">
.threeChart{
    width: 100%;
    height: 100%;
    color: #fff;
}
</style>
